<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./dist/vue.js"></script>
</head>
<body>
    <!-- 
        全局注册组件和局部注册组件的区别:
           全局:是在 new Vue 之前注册
           局部:是在 new Vue 中注册, 谁用谁注册
    -->
    <div id="app">
        <!-- 步骤四：使用组件 -->
        <my-com></my-com>
    </div>
</body>
<!-- 步骤一：编写组件结构 -->
<template id="com">
    <div>{{msg}}</div>
</template>
<script>
    // 步骤二:定义组件
    const Com = {
      template:'#com', 
      data(){
        return {
          msg:'hello component'
        }
      } 
    }
    // 步骤三：全局注册组件
    // Vue.component('my-com',Com)
    new Vue({
        el:'#app',
        // 步骤三：局部注册组件 -- 谁用谁注册 -- 因为是在 <div id="app">内部使用,所以要在 el:"#app"中注册
        components:{ // 注意是 components
            'my-com':Com
        }

    })
</script>
</html>